<template>
    <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto"
        class="demo-ruleForm" :size="formSize" status-icon>
        <el-form-item label="当前密码" prop="OldLoginPwd">
            <el-input v-model="ruleForm.OldLoginPwd" type="password"  show-password/>
        </el-form-item>
        <el-form-item label="新密码" prop="NewLoginPwd">
            <el-input v-model="ruleForm.NewLoginPwd" type="password"  />
        </el-form-item>
        <el-form-item label="确认密码" prop="AgainPWd">
            <el-input v-model="ruleForm.AgainPWd" type="password"  show-password/>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submitForm(ruleFormRef)">
                保存
            </el-button>
            <el-button @click="resetForm(ruleFormRef)">重置</el-button>
        </el-form-item>
    </el-form>

</template>
<script lang="ts" setup>
import { reactive, ref, onMounted } from 'vue'
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
import { ElNotification } from 'element-plus'
import {
    useRouter
} from 'vue-router'
var Id = sessionStorage.getItem("UserId");
import logininfo from "../api/loginapi"
import { error } from 'echarts/types/src/util/log.js';
const emit = defineEmits(['onSave'])

interface RuleForm {
    Id: string | null
    OldLoginPwd: string,
    NewLoginPwd: string,
    AgainPWd: string
}
const router = useRouter();
const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = ref<RuleForm>({
    Id: Id,
    OldLoginPwd: '',
    NewLoginPwd: '',
    AgainPWd: ''

})


const validatePass3 = (rule: any, value: any, callback: any) => {
     if (value === ruleForm.value.OldLoginPwd) {
        callback(new Error("新密码与当前密码一致"))
    }
    callback()
}
const validatePass2 = (rule: any, value: any, callback: any) => {
    console.log("11", value);
    if (value !== ruleForm.value.NewLoginPwd) {
        callback(new Error("确认密码与新密码不一致"))
    } else {
        callback()
    }
}
const rules = reactive<FormRules<RuleForm>>({
    OldLoginPwd: [
        { required: true, message: '请输入当前密码', trigger: 'blur' },
    ],
    NewLoginPwd: [
        { validator: validatePass3, required: true, trigger: 'blur' },
        { min: 6, max: 12, message: '6-12个字符'},
    ],
    AgainPWd: [
        { validator: validatePass2, required: true, trigger: 'blur' }
    ]

})

onMounted(() => {
    // getData();
})
const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            console.log("ruleForm.data", ruleForm.value)

            logininfo.ChangePwd(ruleForm.value).then((res: any) => {
                console.log("res", res)
                if (res.code == 1) {
                    ElNotification({
                        title: 'Success',
                        message: '修改成功,请重新登录',
                        type: 'success',
                        duration: 800,
                        onClose: () => {
                            emit("onSave", true)
                        }
                    })
                    router.push({ path: '/login' })
                } else {
                    ElNotification({
                        title: 'Error',
                        message: '失败',
                        type: 'error',
                        duration: 800,
                    })
                }
            }).catch((err: any) => {
                ElNotification({
                    title: 'Error',
                    message: '失败',
                    type: 'error',
                    duration: 800,
                })
                console.log("err", err)
            })
        } else {
            console.log('error submit!', fields)
        }
    })
}

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}
</script>